<template>
  <a-card :tab-list="tabListTitle"
          v-bind="$attrs"
          :active-tab-key="activeKey"
          @tabChange="onTabChange">
    <!-- 访问数据统计 Tab 内容 -->
    <template v-if="activeKey === 'tab1'">
      <div class="chart-container">
        <!-- 单图表占据整行 -->
        <VisitDataChart />
      </div>
    </template>
  </a-card>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { Card as ACard } from 'ant-design-vue';
import VisitDataChart from './VisitDataChart.vue'; // 新图表组件

const activeKey = ref('tab1');

const tabListTitle = [
  {
    key: 'tab1',
    tab: '访问数据统计', // 替换为新标题
  },
];

function onTabChange(key: string) {
  activeKey.value = key;
}
</script>

<style scoped>
.chart-container {
  padding: 16px; /* 与 Card 内边距呼应 */
}
.ant-card-body {
  padding: 0; /* 取消默认内边距，由 chart-container 控制 */
}
</style>